@use '../config';
@use '../utils/util';

/* - Layout 布局 -
************************* */

// Container
@if util.expect(config.$abbr-container) {

  #{util.class-generator(config.$abbr-container)}
  {
    width: 100%;
  }

  @each $key, $value in config.$map-screens {

    #{util.class-generator(config.$abbr-container, $key)}
    {
      max-width: $value;
    }

  }

}

// Box Decoration Break
@if util.expect(config.$abbr-box-decoration-break) {

  #{util.class-generator(config.$abbr-box-decoration-break, slice)}
  {
    box-decoration-break: slice;
  }

  #{util.class-generator(config.$abbr-box-decoration-break, clone)}
  {
    box-decoration-break: clone;
  }

}

// Box Sizing
@if util.expect(config.$abbr-box-sizing) {

  #{util.class-generator(config.$abbr-box-sizing, border)}
  {
    box-sizing: border-box;
  }

  #{util.class-generator(config.$abbr-box-sizing, content)}
  {
    box-sizing: content-box;
  }

}

// Display
@if util.expect(config.$abbr-display) {

  @each $value in (
    block,
    inline-block,
    inline,
    flex,
    inline-flex,
    table,
    inline-table,
    table-caption,
    table-cell,
    table-column,
    table-column-group,
    table-footer-group,
    table-header-group,
    table-row-group,
    table-row,
    flow-root,
    grid,
    inline-grid,
    contents,
    list-item,
    hidden
  ) {

    #{util.class-generator(config.$abbr-display, $value)}
    {
      display: if($value != hidden, $value, none);
    }

  }

}

// Float
@if util.expect(config.$abbr-float) {

  @each $value in (
    left,
    right,
    none
  ) {

    #{util.class-generator(config.$abbr-float, $value)}
    {
      float: $value;
    }

  }

}

// Clear Float
@if util.expect(config.$abbr-clear) {

  @each $value in (
    left,
    right,
    none,
    both
  ) {

    #{util.class-generator(config.$abbr-clear, $value)}
    {
      clear: $value;
    }

  }
}

// Isolation
@if util.expect(config.$abbr-isolation) {

  #{util.class-generator(config.$abbr-isolation, isolate)}
  {
    isolation: isolate;
  }

  #{util.class-generator(config.$abbr-isolation, isolation-auto)}
  {
    isolation: auto;
  }

}

// Object Fit
@if util.expect(config.$abbr-object-fit) {

  @each $value in (
    contain,
    cover,
    fill,
    scale-down,
    none
  ) {

    #{util.class-generator(config.$abbr-object-fit, $value)}
    {
      object-fit: $value;
    }

  }

}

// Object Position
@if util.expect(config.$abbr-object-position) {

  @each $key, $value in config.$map-objectPosition {

    #{util.class-generator(config.$abbr-object-position, $key)}
    {
      object-position: $value;
    }

  }

}

// Overflow
@if util.expect(config.$abbr-overflow) {

  @each $values in (
    (auto),
    (hidden),
    (visible),
    (scroll),
    (x, auto),
    (y, auto),
    (x, hidden),
    (y, hidden),
    (x, visible),
    (y, visible),
    (x, scroll),
    (y, scroll)
  ) {

    #{util.class-generator(config.$abbr-overflow, $values...)}
    {

      @if length($list: $values) < 2 {
        overflow: nth($list: $values, $n: 1);
      }
      @else {
        #{'overflow-'}#{nth($list: $values, $n: 1)}: nth($list: $values, $n: 2);
      }

    }

  }

}

// Overscroll Behavior
@if util.expect(config.$abbr-overscroll-behavior) {

  @each $values in (
    (auto),
    (contain),
    (none),
    (y, auto),
    (y, contain),
    (y, none),
    (x, auto),
    (x, contain),
    (x, none)
  ) {

    #{util.class-generator(config.$abbr-overscroll-behavior, $values...)}
    {

      @if length($list: $values) < 2 {
        overscroll-behavior: nth($list: $values, $n: 1);
      }
      @else {
        #{'overscroll-behavior-'}#{nth($list: $values, $n: 1)}: nth($list: $values, $n: 2);
      }

    }

  }

}


// Position
@if util.expect(config.$abbr-position) {

  @each $value in (
    static,
    fixed,
    absolute,
    relative,
    sticky
  ) {

    #{util.class-generator(config.$abbr-position, $value)}
    {
      position: $value;
    }

  }

}

// Top Right Bottom Left
@each $outer-key, $outer-value in util.map-handler(config.$map-inset) {

  $map-trbt: ();

  @if util.expect(config.$abbr-top) {
    $map-trbt: map-merge(
      $map1: $map-trbt,
      $map2: (
        (config.$abbr-top, ''): (top)
      )
    )
  }

  @if util.expect(config.$abbr-right) {
    $map-trbt: map-merge(
      $map1: $map-trbt,
      $map2: (
        (config.$abbr-right, ''): (right)
      )
    )
  }

  @if util.expect(config.$abbr-bottom) {
    $map-trbt: map-merge(
      $map1: $map-trbt,
      $map2: (
        (config.$abbr-bottom, ''): (bottom)
      )
    )
  }

  @if util.expect(config.$abbr-left) {
    $map-trbt: map-merge(
      $map1: $map-trbt,
      $map2: (
        (config.$abbr-left, ''): (left)
      )
    )
  }

  @if util.expect(config.$abbr-inset) {
    $map-trbt: map-merge(
      $map1: $map-trbt,
      $map2: (
        (config.$abbr-inset, ''): (top, right, bottom, left),
        (config.$abbr-inset, x): (right, left),
        (config.$abbr-inset, y): (top, bottom)
      )
    )
  }

  @each $inner-key, $inner-values in $map-trbt {

    @if $outer-key != 'auto' {

      #{util.class-generator('-',
          nth($list: $inner-key, $n: 1),
          nth($list: $inner-key, $n: 2),
          $outer-key
        )
      }

      {
        @each $value in $inner-values {
          #{$value}: #{'-' + $outer-value};
        }
      }

    }

    #{util.class-generator(
        nth($list: $inner-key, $n: 1),
        nth($list: $inner-key, $n: 2),
        $outer-key
      )
    }

    {
      @each $value in $inner-values {
        #{$value}: $outer-value;
      }
    }

  }

}

// Visible
@if util.expect(config.$abbr-visible) {

  #{util.class-generator(config.$abbr-visible)}
  {
    visibility: visible;
  }

  #{util.class-generator(#{'in'}#{config.$abbr-visible})}
  {
    visibility: hidden;
  }

}

// Z-Index
@if util.expect(config.$abbr-z-index) {

  @each $key, $value in util.map-handler(config.$map-zIndex) {

    #{util.class-generator(config.$abbr-z-index, $key)}
    {
      z-index: $value;
    }

  }

}

// Flex Direction
@if util.expect(config.$abbr-flex-direction) {

  @each $key, $value in (
    (row, ''): row,
    (row, reverse): row-reverse,
    (col, ''): column,
    (col, reverse): column-reverse
  ) {

    #{util.class-generator(
        config.$abbr-flex-direction,
        nth($list: $key, $n: 1),
        nth($list: $key, $n: 2)
      )
    }
    {
      flex-direction: $value;
    }

  }

}

// Flex Wrap
@if util.expect(config.$abbr-flex-wrap) {

  @each $key, $value in (
    (wrap, ''): wrap,
    (wrap, reverse): wrap-reverse,
    (nowrap, ''): nowrap
  ) {

    #{util.class-generator(
        config.$abbr-flex-wrap,
        nth($list: $key, $n: 1),
        nth($list: $key, $n: 2)
      )
    }
    {
      flex-wrap: $value;
    }

  }

}

// Flex
@if util.expect(config.$abbr-flex) {

  @each $key, $value in util.map-handler(config.$map-flex) {

    #{util.class-generator(config.$abbr-flex, $key)}
    {
      flex: $value;
    }

  }

}

// Flex Grow
@if util.expect(config.$abbr-flex-grow) {

  @each $key, $value in util.map-handler(config.$map-flexGrow) {

    #{util.class-generator(config.$abbr-flex-grow, grow, $key)}
    {
      flex-grow: $value;
    }

  }

}

// Flex Shrink
@if util.expect(config.$abbr-flex-shrink) {

  @each $key, $value in util.map-handler(config.$map-flexShrink) {

    #{util.class-generator(config.$abbr-flex-shrink, shrink, $key)}
    {
      flex-shrink: $value;
    }

  }

}

// Order
@if util.expect(config.$abbr-order) {

  @each $key, $value in util.map-handler(config.$map-order) {

    #{util.class-generator(config.$abbr-order, $key)}
    {
      order: $value;
    }

  }

}

// Grid Template Columns
@if util.expect(config.$abbr-grid) {

  @each $key, $value in util.map-handler(config.$map-gridTemplateColumns) {

    #{util.class-generator(config.$abbr-grid, cols, $key)}
    {
      grid-template-columns: $value;
    }

  }

}


// Grid Column Start / End
@if util.expect(config.$abbr-grid-column) {

  @each $key, $value in util.map-handler(config.$map-gridColumn) {

    #{util.class-generator(config.$abbr-grid-column, $key)}
    {
      grid-column: $value;
    }

  }

  @each $key, $value in util.map-handler(config.$map-gridColumnStart) {

    #{util.class-generator(config.$abbr-grid-column, start, $key)}
    {
      grid-column-start: $value;
    }

  }

  @each $key, $value in util.map-handler(config.$map-gridColumnEnd) {

    #{util.class-generator(config.$abbr-grid-column, end, $key)}
    {
      grid-column-end: $value;
    }

  }

}

// Grid Template Rows
@if util.expect(config.$abbr-grid) {

  @each $key, $value in util.map-handler(config.$map-gridTemplateRows) {

    #{util.class-generator(config.$abbr-grid, rows, $key)}
    {
      grid-template-rows: $value;
    }

  }

}

// Grid Row Start / End
@if util.expect(config.$abbr-grid-row) {

  @each $key, $value in util.map-handler(config.$map-gridRow) {

    #{util.class-generator(config.$abbr-grid-row, $key)}
    {
      grid-row: $value;
    }

  }

  @each $key, $value in util.map-handler(config.$map-gridRowStart) {

    #{util.class-generator(config.$abbr-grid-row, start, $key)}
    {
      grid-row-start: $value;
    }

  }

  @each $key, $value in util.map-handler(config.$map-gridRowEnd) {

    #{util.class-generator(config.$abbr-grid-row, end, $key)}
    {
      grid-row-end: $value;
    }

  }

}

// Grid Auto Flow
@if util.expect(config.$abbr-grid) {

  @each $key, $value in (
    (row, ''): row,
    (col, ''): column,
    (row, dense): row dense,
    (col, dense): column dense
  ) {

    #{util.class-generator(
        config.$abbr-grid,
        flow,
        nth($list: $key, $n: 1),
        nth($list: $key, $n: 2),
      )
    }
    {
      grid-auto-flow: $value;
    }

  }

}

// Grid Auto Columns
@if util.expect(config.$abbr-grid-auto) {

  @each $key, $value in util.map-handler(config.$map-gridAutoColumns) {

    #{util.class-generator(config.$abbr-grid-auto, cols, $key)}
    {
      grid-auto-columns: $value;
    }

  }

}

// Grid Auto Rows
@if util.expect(config.$abbr-grid-auto) {

  @each $key, $value in util.map-handler(config.$map-gridAutoRows) {

    #{util.class-generator(config.$abbr-grid-auto, rows, $key)}
    {
      grid-auto-rows: $value;
    }

  }

}

// Gap
@if util.expect(config.$abbr-gap) {

  @each $outer-key, $outer-value in util.map-handler(config.$map-gap) {

    @each $inner-key, $inner-value in (
      '': '',
      x: 'column-',
      y: 'row-'
    ) {

      @if $inner-key == '' {

        #{util.class-generator(config.$abbr-gap, $outer-key)}
        {
          #{$inner-value}#{'gap'}: $outer-value;
        }

      }
      @else {

        #{util.class-generator(config.$abbr-gap, $inner-key, $outer-key)}
        {
          #{$inner-value}#{'gap'}: $outer-value;
        }

      }

    }

  }

}

// Justify Content
@if util.expect(config.$abbr-justify-content) {

  @each $key, $value in (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly
  ) {

    #{util.class-generator(config.$abbr-justify-content, $key)}
    {
      justify-content: $value;
    }

  }

}

// Justify Items
@if util.expect(config.$abbr-justify-items) {

  @each $key, $value in (
    start: start,
    end: end,
    center: center,
    stretch: stretch
  ) {

    #{util.class-generator(config.$abbr-justify-items, $key)}
    {
      justify-items: $value;
    }

  }

}

// Justify Self
@if util.expect(config.$abbr-justify-self) {

  @each $key, $value in (
    auto: auto,
    start: start,
    end: end,
    center: center,
    stretch: stretch
  ) {

    #{util.class-generator(config.$abbr-justify-self, $key)}
    {
      justify-self: $value;
    }

  }

}

// Align Content
@if util.expect(config.$abbr-align-content) {

  @each $key, $value in (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly
  ) {

    #{util.class-generator(config.$abbr-align-content, $key)}
    {
      align-content: $value;
    }

  }

}

// Align Items
@if util.expect(config.$abbr-align-items) {

  @each $key, $value in (
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch
  ) {

    #{util.class-generator(config.$abbr-align-items, $key)}
    {
      align-items: $value;
    }

  }

}

// Align Self
@if util.expect(config.$abbr-align-self) {

  @each $key, $value in (
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch,
    auto: auto
  ) {

    #{util.class-generator(config.$abbr-align-self, $key)}
    {
      align-self: $value;
    }

  }

}

// Place Content
@if util.expect(config.$abbr-place-content) {

  @each $key, $value in (
    start: start,
    end: end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
    stretch: stretch
  ) {

    #{util.class-generator(config.$abbr-place-content, $key)}
    {
      place-content: $value;
    }

  }

}

// Place Items
@if util.expect(config.$abbr-place-items) {

  @each $key, $value in (
    start: start,
    end: end,
    center: center,
    stretch: stretch
  ) {

    #{util.class-generator(config.$abbr-place-items, $key)}
    {
      place-items: $value;
    }

  }

}

// Place Self
@if util.expect(config.$abbr-place-self) {

  @each $key, $value in (
    start: start,
    end: end,
    center: center,
    stretch: stretch,
    auto: auto
  ) {

    #{util.class-generator(config.$abbr-place-self, $key)}
    {
      place-self: $value;
    }

  }

}